<template>
  <div>
    <Button  type="primary"  @click="handleCurrentRowChanged">
      编辑
    </Button>
    <Drawer
        title="编辑项目"
        v-model="value"
        width="700"
        :mask-closable="true"
        :styles="styles">
      <Form  ref="myForm" :model="formData" >
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="模块名称" label-position="top"  prop="ModuleName">
              <Input v-model="formData.ModuleName" placeholder="输入模块名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="研发人员" label-position="top" prop="DevelopName">
              <Input v-model="formData.DevelopName" placeholder="研发人员" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="服务名称" label-position="top" prop="ServerName">
              <Input v-model="formData.ServerName" placeholder="服务名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="代码修改" label-position="top" prop="Isedit">
              <Select   v-model="formData.Isedit" placeholder="代码修改">
                <Option value="未修改">未修改</Option>
                <Option value="已修改">已修改</Option>
              </Select>
              <!--              <Input v-model="formData.Isedit" placeholder="代码修改" />-->
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="代码部署" label-position="top" prop="Isdeploy">
              <Select   v-model="formData.Isdeploy" placeholder="代码修改">
                <Option value="未部署">未部署</Option>
                <Option value="已部署">已部署</Option>
              </Select>
              <!--              <Input v-model="formData.Isdeploy" placeholder="代码修改" />-->

            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="分支名称" label-position="top" prop="BranchName">
              <Input v-model="formData.BranchName" placeholder="分支名称" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="value = false;">取消</Button>
        <Button type="primary"  @click="saveSelectData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>

import axios from "axios";

export default {
  name: 'EditService',
  props:['id'],
  inject:['reload'],
  data () {
    return {
      value: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        ModuleName: '',
        DevelopName: '',
        ServerName: '',
        Isedit: '未修改',
        Isdeploy: '未部署',
        BranchName: 'xinanhg-test',
      },
    }
  },
  methods: {
    saveSelectData(){
      axios.post(`http://172.30.53.223:8888/api/editservice?id=${this.id}`,this.formData)
          .then(response => {
            this.$Message.success({ background: true, content: '修改成功' });
            console.log(response.data); // 根据后端返回的结果进行相应的处理
            // this.reload()
            this.$emit('reload','load')
          })
          .catch(error => {
            // 请求失败处理
            console.error(error); // 处理错误情况
            this.$Message.error({ background: true, content: '修改失败' });
          });
      this.value=false
    },
    handleCurrentRowChanged(){
      axios.get(`http://172.30.53.223:8888/api/select/service?id=${this.id}`)
          .then(response => {
            // 在请求成功的回调函数中处理返回的数据
            this.formData.ModuleName = response.data.item.ModuleName
            this.formData.DevelopName = response.data.item.DevelopName;
            this.formData.ServerName = response.data.item.ServerName;
            this.formData.Isedit = response.data.item.Isedit;
            this.formData.Isdeploy = response.data.item.Isdeploy;
            this.formData.BranchName = response.data.item.BranchName;
            this.value=true
          }).catch(error => {
        // 请求发生错误时的处理
        console.log(error);
      });
    },
    background (type) {
      this.$Message[type]({
        background: true,
        content: '编辑成功'
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
